import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import styles from './index.module.scss'
import classNames from 'classnames'

interface IProps {
  //  [ more => '状态显示查看更多按钮', loading => '状态显示加载状态', noMore => '显示无更多数据' ]
  status: string
  //  [ more => '查看更多', loading => '加载中', noMore => '没有更多' ]
  text?: object
}

export default class LoadMore extends Component<IProps, {}> {
  props: any
  render() {
    const prefixCls = 'load-more'
    const { status, text, className } = this.props
    let textObj = Object.assign({ more: '查看更多', loading: '正在加载', noMore: '没有更多啦，避免兑换币过期请尽快兑商品哦~' }, text)
    return (<View className={classNames(styles[prefixCls], className)}>
      <View className={styles[`${prefixCls}-status`]}>
        {status === 'loading' && <View className={styles[`${prefixCls}-icon`]}>
          <View className={styles[`${prefixCls}-icon-box`]}>
            <View className={styles[`${prefixCls}-icon-box__item`]}/>
            <View className={styles[`${prefixCls}-icon-box__item`]}/>
            <View className={styles[`${prefixCls}-icon-box__item`]}/>
            <View className={styles[`${prefixCls}-icon-box__item`]}/>
            <View className={styles[`${prefixCls}-icon-box__item`]}/>
            <View className={styles[`${prefixCls}-icon-box__item`]}/>
            <View className={styles[`${prefixCls}-icon-box__item`]}/>
            <View className={styles[`${prefixCls}-icon-box__item`]}/>
            <View className={styles[`${prefixCls}-icon-box__item`]}/>
            <View className={styles[`${prefixCls}-icon-box__item`]}/>
            <View className={styles[`${prefixCls}-icon-box__item`]}/>
          </View>
        </View>}
        <View className={styles[`${prefixCls}-text`]}>{textObj[status]}</View>
      </View>
    </View>)
  }
}
